<template>
  <div
    class="w-full max-w-md mx-auto px-6 py-8 rounded-2xl shadow-md bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 animate-pulse"
  >
    <!-- 背景图骨架 -->
    <div class="relative w-full h-64 overflow-hidden mb-8">
      <div class="absolute w-full h-full bg-gray-300 dark:bg-gray-700 blur-[2px]"></div>
      <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-b from-transparent to-white dark:to-gray-900"></div>
    </div>

    <!-- 头像骨架 -->
    <div class="flex justify-center mb-4">
      <div class="w-[100px] h-[100px] rounded-full bg-gray-300 dark:bg-gray-700"></div>
    </div>

    <!-- 昵称骨架 -->
    <div class="h-6 w-1/2 mx-auto bg-gray-300 dark:bg-gray-700 rounded mb-2"></div>
    <div class="flex justify-center items-center space-x-2 mb-4">
      <span class="block w-10 h-0.5 bg-gray-300 dark:bg-gray-700 rounded"></span>
      <span class="block w-2.5 h-2.5 bg-gray-300 dark:bg-gray-700 rounded-full"></span>
      <span class="block w-10 h-0.5 bg-gray-300 dark:bg-gray-700 rounded"></span>
    </div>

    <!-- 签名骨架 -->
    <div class="h-4 w-2/3 mx-auto bg-gray-300 dark:bg-gray-700 rounded mb-6"></div>

    <!-- 数据统计骨架 -->
    <div class="flex justify-around items-center text-center mb-6">
      <div class="space-y-2">
        <div class="h-5 w-10 bg-gray-300 dark:bg-gray-700 rounded"></div>
        <div class="h-4 w-12 bg-gray-300 dark:bg-gray-700 rounded"></div>
      </div>
      <div class="h-8 w-px bg-gray-300 dark:bg-gray-700"></div>
      <div class="space-y-2">
        <div class="h-5 w-10 bg-gray-300 dark:bg-gray-700 rounded"></div>
        <div class="h-4 w-12 bg-gray-300 dark:bg-gray-700 rounded"></div>
      </div>
      <div class="h-8 w-px bg-gray-300 dark:bg-gray-700"></div>
      <div class="space-y-2">
        <div class="h-5 w-10 bg-gray-300 dark:bg-gray-700 rounded"></div>
        <div class="h-4 w-12 bg-gray-300 dark:bg-gray-700 rounded"></div>
      </div>
    </div>

    <!-- 社交图标骨架 -->
    <div class="flex justify-center space-x-6">
      <div class="w-8 h-8 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
      <div class="w-8 h-8 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
    </div>
  </div>
</template>
